<!DOCTYPE html>
<html>
<head>
    {include file="public/head"}
    <style>
        .reward{color: #E8574E;font-size: 16px;display: inline-block;margin-left: 6px;}
    </style>
</head>
<body>
<div class="g-flexview">
    <header class="m-navbar">
        <a href="javascript:history.back();" class="navbar-item">
            <i class="back-ico"></i>
        </a>
        <div class="navbar-center">
            <span class="navbar-title">账户明细</span>
        </div>
    </header>
    <div class="g-scrollview" id="J_List">
        <div id="J_Tab" class="m-tab">
            <ul class="tab-nav">
                <li class="tab-nav-item tab-active"><a href="javascript:;">全部</a></li>
                <li class="tab-nav-item"><a href="javascript:;">收入</a></li>
                <li class="tab-nav-item"><a href="javascript:;">支出</a></li>
            </ul>
            <div class="tab-panel">
                <div class="tab-panel-item tab-active" id="All"></div>
                <div class="tab-panel-item" id="In">
                    {volist name="income" id="index"}
                    <a class="cell-item" href="javascript:;">
                        <div class="cell-left">
                            <span class="cell-icon">
                                <img src="/static/img/in.png" alt="收入">
                            </span>
                            {$index.remark}<span class="reward">{$index.money}</span>
                        </div>
                        <div class="cell-right">{$index.add_time|date="m-d H:i",###}</div>
                    </a>
                    {/volist}
                </div>
                <div class="tab-panel-item" id="Out">
                    {volist name="expenditure" id="index"}
                    <a class="cell-item" href="javascript:;">
                        <div class="cell-left">
                            <span class="cell-icon">
                                    <img src="/static/img/out.png" alt="支">
                            </span>
                            {$index.remark}<span class="reward">{$index.money}</span>
                        </div>
                        <div class="cell-right">{$index.add_time|date="m-d H:i",###}</div>
                    </a>
                    {/volist}
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="template">
    {{each list as index}}
    <div class="m-cell">
        <a class="cell-item" href="javascript:;">
            <div class="cell-left">
                <span class="cell-icon">
                    <img src="{{index.img}}" alt="支">
                </span>
                {{index.remark}}<span class="reward">{{index.money}}</span>
            </div>
            <div class="cell-right">{{index.time}}</div>
        </a>
    </div>
    {{/each}}
</script>
{include file="public/js"}
<script>
    !function ($) {
        var currentTab='All';
        var $tab = $('#J_Tab');
        $tab.tab({
            nav: '.tab-nav-item',
            panel: '.tab-panel-item',
            activeClass: 'tab-active'
        });
        $tab.find('.tab-nav-item').on('open.ydui.tab', function (e) {
            //console.log('索引：%s - [%s]正在打开', e.index, $(this).text());
            if (e.index == 0){
                currentTab='All';
            } else if (e.index == 1){
                currentTab = 'In';
            }else {
                currentTab = 'Out';
            }
        });
        $tab.find('.tab-nav-item').on('opened.ydui.tab', function (e) {
            //console.log('索引：%s - [%s]已经打开了', e.index, $(this).text());
        });
        //  滚动加载
        /* 通过自定义的方法获取数据【通常是需要定义变量当前第几页page，和每页请求的记录数pageSize】 */
        var page = 1, pageSize = 15;
        $('#J_List').infiniteScroll({
            pageSize: pageSize,
            initLoad: true,
            binder: '#J_List', // 监听滚动容器，用于判断当前进度条是否位于可视区域
            loadingHtml: '<img src="/static/img/loading.svg">', /* <strong>加载中...</strong> 当然也可以<img src="../img/loading.gif" /> */
            loadListFn: function () {
                var def = $.Deferred();
                /* 通过自定义的方法获取数据 */
                $.ajax({
                    url: '/index/index/detail',
                    dataType: 'json',
                    data: { page: page, pagesize: pageSize ,type : currentTab},
                    success: function (ret) {
                        /* 假设ret.list为后端返回的列表数组 */

                        /* 用你喜欢的方法将获取到的数据拼接成HTML，然后插入；*/
                        /* 建议使用模板引擎，示例使用artTemplate；https://github.com/aui/artTemplate */

                        //var html = ret.list + '将数据拼接成html';
                        var html=template('template',{list : ret.list});
                        $('#'+currentTab).append(html);

                        /* 获取数据，并插入页面后，调用resole，并传入当前获取的记录列表集合 */
                        def.resolve(ret.list);

                        /* 页码自增1 */
                        ++page;
                    }
                });
                return def.promise();
            }
        });
    }(jQuery);
</script>
{/*
<!--
<a class="cell-item" href="javascript:;">
    <div class="cell-left">
        <span class="cell-icon">
            <img src="/static/img/in.png" alt="收入">
            <img src="/static/img/out.png" alt="支出">
        </span>
        ddsdfd<span class="reward">12121</span>
    </div>
    <div class="cell-right">08-05 12:06</div>
</a>
-->*/}
</body>
</html>